<!--
 * @Author: byron
 * @Date: 2021-10-18 08:35:55
 * @LastEditTime: 2022-05-10 19:02:22
-->
<template>
    <div class="nav">
        <ul class="nav-list">
            <router-link
                class="nav-item"
                v-for="(item, index) in menus[0].children"
                :to="item.path"
                active-class="active"
                :key="index"
                tag="li"
                exact
                >{{ item.meta.title }}</router-link
            >
        </ul>
    </div>
</template>

<script>
import { menuRoutes } from '@/router'
export default {
    data() {
        return {
            menus: [
                {
                    type: 'root',
                    children: menuRoutes,
                },
            ],
        }
    },
}
</script>
<style lang="less" scoped>
.nav {
    user-select: none;
    display: flex;
    justify-content: center;
    height: 100%;
    .nav-list {
        display: flex;
        margin-right: 15px;
        margin-left: 25px;
        height: 100%;
        margin-top: 2px;
        background-color: rgba(255, 255, 255, 0);
        color: rgb(97, 97, 97);
    }
    .nav-list a:hover {
        color: black;
    }
}

.active {
    color: #121212;
    font-weight: 600;
}
.active::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100%;
    height: 2px;
    transform: translateX(-50%);
    background: #0066ff;
}
li {
    position: relative;
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    line-height: 46px;
    max-height: 40px;
}
li:not(.active):hover {
    color: #333;
}
li:not(.active)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 2px;
    background: #0066ff;
}
li:not(.active):hover::after {
    left: 0;
    transition: all 1s;
    width: 100%;
}
</style>
